<template>
  <div class="nav-menu">
    <div class="logo">
      <span>cms</span>
      <span class="title" v-if="!isStow">系统</span>
    </div>
    <div class="menu-list">
      <el-menu
        :default-active="defaultId + ''"
        class="el-menu-vertical-demo"
        background-color="#0f234f"
        text-color="#fff"
        active-text-color="#fff"
        :collapse="isStow"
        :collapse-transition="false"
      >
        <template v-for="item in menu" :key="item.id">
          <!--          一级菜单-->
          <template v-if="item.type == 1">
            <el-sub-menu :index="item.id + ''">
              <template #title>
                <el-icon>
                  <monitor />
                </el-icon>
                <span>{{ item.name }}</span>
              </template>
              <template v-for="chilItem in item.children" :key="chilItem.id">
                <!--              二级菜单-->
                <template v-if="chilItem.children && chilItem.children[0]">
                  <!--                  <el-sub-menu :index="chilItem.id + ''">-->
                  <!--                    <template #title>-->
                  <!--                      <span>{{ chilItem.name }}</span>-->
                  <!--                    </template>-->
                  <!--                    <template-->
                  <!--                      v-for="threeItem in chilItem.children"-->
                  <!--                      :key="threeItem.id"-->
                  <!--                    >-->
                  <!--                      <el-menu-item :index="threeItem.id + ''">-->
                  <!--                        {{ threeItem.name }}-->
                  <!--                      </el-menu-item>-->
                  <!--                    </template>-->
                  <!--                  </el-sub-menu>-->
                  <el-menu-item
                    :index="chilItem.id + ''"
                    @click="handMeanClick(chilItem)"
                  >
                    {{ chilItem.name }}
                  </el-menu-item>
                </template>
                <template v-else>
                  <el-menu-item
                    :index="chilItem.id + ''"
                    @click="handMeanClick(chilItem)"
                  >
                    {{ chilItem.name }}
                  </el-menu-item>
                </template>
                <!--      end        二级菜单-->
              </template>
            </el-sub-menu>
          </template>
          <!--     end     一级菜单-->
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { getCurrentRote } from '@/utils/map-menu'

export default defineComponent({
  name: 'nav-menu',
  props: {
    isStow: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    const loginStore = useStore()
    const router = useRouter()
    const route = useRoute()
    const menu = computed(() => {
      return loginStore.state.user.menu
    })
    const handMeanClick = (item: any) => {
      router.push(item.url)
    }
    //获取当前路由
    const currentPath = route.path
    const defaultId = ref(39)
    defaultId.value = getCurrentRote(menu.value, currentPath).id
    return {
      menu,
      handMeanClick,
      defaultId
    }
  }
})
</script>

<style lang="less" scoped>
.nav-menu {
  height: 100%;

  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    font-size: 24px;
    color: #fff;
  }
  .el-menu {
    border-right: none;
    .el-menu-item.is-active {
      background: #409eff;
    }
    .el-sub-menu.is-opened {
      ::v-deep .el-sub-menu__title {
        background: rgba(0, 0, 0, 0.3) !important;
      }
    }
  }
}
</style>
